<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <link rel="stylesheet" href="/assets/layui/css/layui.css">
  <script type="text/javascript" src="/assets/js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="/assets/layui/layui.js"></script>

</head>
<body>

<!-- 搜索框开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>查询条件</legend>
</fieldset>
<form class="layui-form" id="searchForm" lay-filter="searchForm">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">用户名:</label>
      <div class="layui-input-inline">
        <input type="text" name="name" lay-filter="sea_name" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-inline">
      <label class="layui-form-label">居住地:</label>
      <div class="layui-input-inline">
        <select name="address" id="sea_address" lay-filter="sea_address"  lay-search="">
          <option value="">直接选择或搜索选择</option>
          <option th:each="addr :${addressList}" th:value="${addr}" th:text="${addr}"></option>
        </select>
      </div>
    </div>

    <div class="layui-inline">
      <label class="layui-form-label">出生日期:</label>
      <div class="layui-input-inline">
        <input type="text" id="sea_birthday" name="birthdayRange" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-inline">
      <button type="button" class="layui-btn layui-btn-normal layui-icon layui-icon-search" lay-submit lay-filter="doSearch">搜索</button>
      <button type="reset" class="layui-btn layui-btn-normal layui-icon layui-icon-refresh-3">重置</button>
    </div>
  </div>
</form>
<!-- 搜索框结束 -->

<!-- 数据表格 -->
<div style="margin-left: 50px;">
  <table class="layui-hide" id="userInfoTab" lay-filter="userInfoTab"></table>
</div>

<!-- 行工具条 -->
<div id="rowBar" style="display: none">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</div>

<!-- 表头工具栏 -->
<script type="text/html" id="headBar">
  <div class="layui-btn-container">
    <button type="button" class="layui-btn" lay-event="add">添加用户</button>
    <button type="button" class="layui-btn layui-btn-danger" lay-event="batchDel">批量删除</button>
  </div>
</script>

<!-- 增加和修改用户弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
  <form class="layui-form" lay-filter="dataForm" id="dataForm">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="hidden" name="id" id="id"/>
        <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入姓名" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">居住地址</label>
      <div class="layui-input-block">
        <input type="text" name="address" lay-verify="address" autocomplete="off" placeholder="请输入居住地址" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">出生日期</label>
      <div class="layui-input-block">
        <input type="text" id="birthday" name="birthday" lay-verify="birthday" placeholder="请输入出生日期" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">工龄</label>
      <div class="layui-input-block">
        <input type="text" name="age" lay-verify="age" autocomplete="off" placeholder="请输入工龄" class="layui-input">
      </div>
    </div>

    <!-- 按钮 -->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit">确定</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</div>
<!-- 增加和修改用户弹出层结束 -->


<!--th:inline="none"-->
<script type="text/javascript" th:inline="none">
  layui.use(['table', 'laydate', 'form', 'layer'], function () {
    var table = layui.table;
    var laydate = layui.laydate;
    var form = layui.form;
    var layer = layui.layer;
    var tableIns;   // 数据表格
    var addOrEditFrame;  // 新增或编辑弹出层

    var url;    // 新增或编辑弹出层里的表单的提交居住地址

    // 搜索栏
    // 加载日期输入框
    laydate.render({
      elem: '#sea_birthday'
      ,type: 'year'
      ,range: true //或 range: '~' 来自定义分割字符
    });

    // 初始化数据表格
    tableIns = table.render({
      elem: '#userInfoTab'
      ,toolbar: '#headBar'
      ,width: 800
      ,defaultToolbar:[]
      ,url: '/user/list'
      ,height:'full-150'
      ,cols: [[
        {type:'checkbox', field: 'left', width:40}
        ,{field:'name', title: '用户名', align:'center', width:100}
        ,{field:'age', title: '工龄', sort: true, align:'center',width:80}
        ,{field:'address', title: '居住地址', align:'center', width:200}
        ,{field:'birthday', title: '出生日期', sort: true, width:220, align:'center', templet : "<div>{{layui.util.toDateString(d.birthday, 'yyyy年MM月dd日')}}</div>"}
        ,{fixed:'right', title:'操作', toolbar: '#rowBar', align: 'center'}
      ]]
      ,page: true  //是否启用分页
    });

    // 搜索按钮提交
    form.on("submit(doSearch)", function () {
      var params = $('#searchForm').serialize();
      tableIns.reload({
        url: "/user/list?" + params
      });
    });


    /*监听行工具栏事件开始*/
    table.on('tool(userInfoTab)', function (obj) {
      var layEvent = obj.event;     // 获取lay-event 的值
      var data = obj.data;          // 当前行数据
      if (layEvent === 'delete') {

        layer.confirm('确定要删除用户[' + data.name + ']吗?', function () {
          $.post("/user/delete?id=" + data.id, function (d) {
            if (d.code > 0) {
              layer.msg(d.msg);
              tableIns.reload({
                url: "/user/list"
              });
            } else {
              layer.msg("删除失败!");
            }
          });
        });
      } else if (layEvent === 'edit') {
        openEditUser(data);
      }
    });
    /*监听行工具栏事件结束*/

    /*监听表头工具栏事件开始*/
    table.on('toolbar(userInfoTab)', function (obj) {
      var layEvent = obj.event;
      if (layEvent === "add") {
        // 打开增加用户弹出层
        openAddUser();
      } else {
        // 批量删除
        doBatchDelete();
      }

    });
    /*监听表头工具栏事件结束*/


    /*打开添加用户弹出层*/
    function openAddUser () {
      addOrEditFrame = layer.open({
        type: 1,
        title: '新增用户',
        content: $('#saveOrUpdateDiv'),
        area: ['500px', '350px'],
        success: function () {
          // 清空表单
          $('#dataForm')[0].reset();
          // 加载出生日期输入框
          laydate.render({
            elem: '#birthday'
            ,showBottom: false
          });
          url = "/user/addUser";
        }
      });
    }

    /*打开编辑用户弹出层*/
    function openEditUser (data) {
      addOrEditFrame = layer.open({
        type: 1,
        title: '编辑用户',
        content: $('#saveOrUpdateDiv'),
        area: ['500px', '350px'],
        success: function () {
          form.val('dataForm', data);
          laydate.render({
            elem: '#birthday'
            ,showBottom: false
            ,value: layui.util.toDateString(data.birthday, 'yyyy-MM-dd')
          });
          url = "/user/updateUser";
        }
      });
    }

    // 提交新增或修改的表单
    form.on("submit(doSubmit)", function () {
      var params = $("#dataForm").serialize();
      $.post(url, params, function (obj) {
        layer.msg(obj.msg);
        layer.close(addOrEditFrame);
        tableIns.reload();
      });
    });

    // 表单校验
    form.verify({
      name: function(value) { //value：表单的值、item：表单的DOM对象
        if (value === "") {
          return "用户名不能为空";
        }
        if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
          return '用户名不能有特殊字符';
        }
        if(/(^\_)|(\__)|(\_+$)/.test(value)){
          return '用户名首尾不能出现下划线\'_\'';
        }
        if(/^\d+\d+\d$/.test(value)){
          return '用户名不能全为数字';
        }
      },
      address: function (value) {
        if (value === '') {
          return "居住地址不能为空！";
        }
      },
      birthday: function (value) {
        if (value === "") {
          return "出生日期不能为空";
        }
      },
      age: function (value) {
        if (value === "") {
          return "请输入工龄";
        } else if (value > 3) {
          return "工龄不许超过三年";
        }
      }
    });

    // 处理批量删除
    function doBatchDelete () {
      var checkStatus = table.checkStatus('userInfoTab');
      var checkData = checkStatus.data;
      // 判断是否选择了用户
      if (checkData.length === 0) {
        layer.msg("请选择要移除的用户", {time: 1000});
        return;
      }
      var ids = [];
      $.each(checkData, function (i, item) {
        ids.push(item.id);
      });
      // alert(ids);
      layer.confirm('真的要删除这些用户吗?', function () {
        $.ajax({
          type: 'POST',
          url: '/user/batchDelete',
          data: {ids:ids},
          success: function (res) {
            layer.msg(res.msg, {time: 2000});
            tableIns.reload();
          }
        });
      });
    }

  });   // layui.use 结束

</script>

</body>
</html>
